<template>
    <div>
        <el-row :gutter="20">
            <el-col style="margin-left: 5%" :span="22">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-user-solid grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ infoData[0].value }}</div>
                                    <div>{{ infoData[0].name }}</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-user-solid grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ infoData[1].value }}</div>
                                    <div>{{ infoData[1].name }}</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-user-solid grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">
                                        {{ infoData[3].value }}
<!--                                        <el-button class="grid-num" size="mini">{{ infoData[3].value }}</el-button>-->
<!--                                        <el-popover :width="300" trigger="click" placement="right">-->
<!--                                            <template #reference>-->
<!--                                            </template>-->
<!--                                            <el-table :data="out">-->
<!--                                                <el-table-column width="100" align="center" property="qno" label="床号"/>-->
<!--                                                <el-table-column width="100" align="center" property="name" label="姓名"/>-->
<!--                                                <el-table-column width="100" align="center" property="level"-->
<!--                                                                 label="等级"/>-->
<!--                                            </el-table>-->
<!--                                        </el-popover>-->
                                    </div>
                                    <div>病重</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
						<el-card v-if="infoData[0].value === 0" shadow="hover" style="height: 450px">
							<el-empty image-size="250" description="暂无病人相关统计数据"></el-empty>
						</el-card>
                        <Chart v-else></Chart>
                    </el-col>

                    <el-col :span="12">
                        <el-card shadow="hover" style="height: 450px">
                            <template #header>
                                <div class="clearfix">
                                    <div style="padding: 8px 0">待办事项</div>
                                    <el-input
                                      placeholder="请输入你的任务名称，按回车键确认"
                                      v-model.trim="newTodo.title"
                                      @keyup.enter="add"
                                    />
                                </div>
                            </template>
                            <el-table
                              :show-header="false"
                              :data="todoList"
                              height="250"
                              style="width: 100%"
                              :key="todoList.id"
                            >
                                <el-table-column width="40">
                                    <template #default="scope">
                                        <el-checkbox v-model="scope.row.status"></el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column width="">
                                    <template #default="scope">
                                        <div
                                          class="todo-item"
                                          :class="{
                          'todo-item-del': scope.row.status,
                        }"
                                        >
                                            {{ scope.row.title }}
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="footer" style="padding: 10px 0" v-show="total">
                                <el-checkbox v-model="isAll"></el-checkbox>
                                <span style="font-size: 14px">
                    <span> 已完成 {{ doneTotal }}</span> / {{ total }}
                  </span>
                                <el-button
                                  round
                                  size="mini"
                                  type="danger"
                                  style="float: right"
                                  @click="clearAlldone"
                                >
                                    清除已完成
                                </el-button
                                >
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {computed, reactive, ref, watch} from "vue";
import {ElMessageBox, ElMessage} from "element-plus";
import {nanoid} from "nanoid";
import {useStore} from "vuex";
import Call from "../components/Call.vue";
import Chart from "../components/countChart.vue";

export default {
    name: "dashboard",
    components: {Call, Chart},
    setup() {

        const store = useStore();
        const user = computed(() => store.state.user);
        const name = localStorage.getItem("ms_username");
        const role = name === "admin" ? "超级管理员" : "普通用户";
        //初始化窗口状态
        const callVisible = ref(false);

        const newTodo = reactive({title: ""});
        const infoData = computed(() => store.state.infoData);
        let todoList = ref([]);
        let no = ref();

        //浏览器本地存储
        watch(
          todoList,
          (value) => {
              localStorage.setItem("todoList", JSON.stringify(value));
          },
          {deep: true}
        );
        //添加新的待办
        const add = () => {
            //校验输入数据
            if (newTodo.title === "") {
                ElMessage.error("输入内容不能为空！");
            } else if (total.value >= 10) {
                newTodo.title = "";
                ElMessage.error("最多输入十条待办！");
            } else {
                let todoObj = {id: nanoid(), title: newTodo.title, status: false};
                todoList.value.unshift(todoObj);
                newTodo.title = "";
            }
        };
        //从浏览器本地存储中获取数据
        const getData = () => {
            //切记注意ref获取数据要加.value(耗费太长时间)
            todoList.value = JSON.parse(localStorage.getItem("todoList")) || [];
        };
        getData();
        //定义呼叫操作
        const call = () => {
            callVisible.value = true;
        };
        //总数
        let total = computed(() => {
            return todoList.value.length;
        });
        //已完成数
        let doneTotal = computed(() => {
            return todoList.value.reduce(
              (pre, todo) => pre + (todo.status ? 1 : 0),
              0
            );
        });

        let isAll = computed({
            get() {
                return doneTotal.value === total.value && total.value > 0;
            },
            set(value) {
                todoList.value.forEach((todo) => {
                    todo.status = value;
                });
            },
        });

        //清除已完成
        const clearAlldone = () => {
            if (doneTotal.value > 0) {
                ElMessageBox.confirm("确定要删除已完成待办吗？", "提示", {
                    type: "warning",
                })
                  .then(() => {
                      let temp = reactive([]);
                      todoList.value.forEach((element) => {
                          if (element.status === false) {
                              temp.push(element);
                          }
                          todoList.value = temp;
                      });
                  })
                  .catch(() => {
                  });
            }
        };
        return {
            name,
            todoList,
            role,
            newTodo,
            total,
            doneTotal,
            isAll,
            no,
            callVisible,
            user,
            infoData,
            add,
            clearAlldone,
            call,
        };
    },
};
</script>

<style scoped>
.container {
    width: 90%;
    margin-left: 5%;
    background: rgb(243, 243, 243);
}

.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}

.timeCount {
    margin-top: 10px;
    font-size: 10px;
}
</style>
